<template>
	<view class="index">
		<view v-if="tabberPageLoadFlagShow(0)" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollHeight + 'px'}" scroll-y enable-back-to-top>
				<index ref="index" :config="scrollConfig" :isPage="false" @basicPageFun="basicPageFun"></index>
			</scroll-view>
		</view>

		<view v-if="tabberPageLoadFlagShow(1)" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollHeight + 'px'}" scroll-y enable-back-to-top>
				<control ref="control" :config="scrollConfig" :isPage="false"></control>
			</scroll-view>
		</view>

		<view v-if="tabberPageLoadFlagShow(3)" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height: scrollHeight + 'px'}" scroll-y enable-back-to-top>
				<mine ref="mine" :config="scrollConfig" :isPage="false"></mine>
			</scroll-view>
		</view>


		<qms-tabbar @change="changeTab" class="tabbar" :current-page="currentIndex"></qms-tabbar>
	</view>
</template>

<script>
	import index from "./index.vue";
	import control from "../control/control.vue";
	import mine from "../Mine/mine.vue";

	import AgreementJs from "@/static/js/Agreement.js";
	var Agreement = AgreementJs;

	export default {
		components: {
			index,
			control,
			mine
		},
		data() {
			return {
				// tabbar当前被选中的序号
				currentIndex: 0, // -- 定义选中的id
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				scrollHeight: 500,
				scrollConfig: {
					scrollHeight: 500,
					tabbarHeight: 50,
				},
				tabbarList: [{
						title: '首页',
						activeIcon: 'home-fill',
						inactiveIcon: 'home',
						id: 0,
					},
					{
						title: '智控',
						activeIcon: 'grid-fill',
						inactiveIcon: 'grid',
						id: 1,
					},
					{
						title: '商城',
						activeIcon: 'chat-fill',
						inactiveIcon: 'chat',
						id: 2,
					},
					{
						title: '我的',
						activeIcon: 'account-fill',
						inactiveIcon: 'account',
						id: 3,
					}
				]

			};
		},
		onShow() {
			let that = this;

			if (this.$refs.index && this.$refs.index.onMyShow && this.currentIndex == 0) {
				this.$refs.index.onMyShow();
			} else if (this.$refs.control && this.$refs.control.onMyShow && this.currentIndex == 1) {
				this.$refs.control.onMyShow();
			} else if (this.$refs.mine && this.$refs.mine.onMyShow && this.currentIndex == 3) {
				this.$refs.mine.onMyShow();
			}

		},
		onLoad(options) {
			let that = this;
			let value = 22
			console.log(uni.$m.utils.addUnit(value));
			// const indexID = Number(options.index || 0);

			let systemInfo = uni.getSystemInfoSync();
			this.scrollHeight = systemInfo.screenHeight;
			this.scrollConfig.scrollHeight = systemInfo.screenHeight;

			console.log(this.$utils.isEmpty(this.$store.getters["QmsModule/DeviceAgreement"]));


			// 判断是否存在历设备
			let SelectDeviceInfo = this.$store.getters['QmsModule/SelectDeviceInfo'];
			console.log(this.$utils.isEmpty(SelectDeviceInfo));
			console.log(SelectDeviceInfo);

			/* 	1、判断是否有选中设备，判断是否存在设备连接
				2、判断agreement是否以存在
			 */
			if (!this.$utils.isEmpty(SelectDeviceInfo)) {
				// 有选中的设备，判断是否已经创建过构造函数
				let agreementInfo = this.$store.getters["QmsModule/DeviceAgreement"];
				if (this.$utils.isEmpty(agreementInfo)) {
					// 当未new过构造函数，则执行一遍
					let createAgreement = Agreement.createDeviceAgreement(SelectDeviceInfo.BluetoothProtocol);
					// 在vuex中记录协议函数
					this.$store.commit('QmsModule/ChangeAndSetStateData', {
						Name1: 'DeviceLinkConfig.agreement',
						data: createAgreement
					});
				}
			}


		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.getScollHeightFun();
			});


			// 接收到来自智控的消息信息
			// uni.$on("updateAgreenent")

		},
		onUnload() {
			this.$store.commit('QmsModule/ChangeAndSetStateData', {
				Name1: 'DeviceLinkConfig.inControlPage',
				data: false
			});
			uni.$off("BluetoothData");
			uni.$off("callBackDeviceType"); // 卸载监听选中的设备协议回调
		},
		methods: {
			getOrderToUpdateAgreement() { // 接受指令更新协议构造函数的搭建
				let that = this;

				// 1、判断是否有选中的协议信息，没有选中过协议，aggrenemt一定要是控对象
				// selectedAgreement
				// 2、如果有选中的协议，进入下一步，new 一个构造函数
				// 3、更新vuex中的协议信息
			},

			basicPageFun(data) {
				console.log(data);
				let id = 0;
				if (data.pageType == "toControl") {
					id = 1;
				}
				this.changeTab({
					id: id
				});
			},
			changeTab(data) {
				if (data.id == this.currentIndex) return;

				switch (data.id) {
					case 2:
						return uni.showToast({
							title: '商城模块暂未授权',
							icon: 'none'
						})
						break;
					case 4:
						return uni.navigateTo({
							url: '/st_qms/ChoiceIAddnvoices/ChoiceIAddnvoices'
						});
						break;
					case 1:
						// 设置当前以存在智控页
						this.$store.commit('QmsModule/ChangeAndSetStateData', {
							Name1: 'DeviceLinkConfig.inControlPage',
							data: true
						});
						break;
					default:
						break;
				}

				const selectPageFlag = this.tabberPageLoadFlag.find(item => item.id == data.id);


				if (selectPageFlag.type === undefined) {
					return
				}
				if (selectPageFlag.type === false) {
					// this.tabberPageLoadFlag[index] = true
					this.setTypeToTrueById(this.tabberPageLoadFlag, data.id);
				}

				this.currentIndex = data.id;

				console.log(data.id == 1 && selectPageFlag.type == true);
				if (data.id == 1 && selectPageFlag.type == true) { // 这个时候，去触发show
					if (this.$refs.control && this.$refs.control.onMyShow) {
						this.$refs.control.onMyShow();
					}
				}
			},
			setTypeToTrueById(arr, id) {
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].id === id) {
						arr[i].type = true;
						break;
					}
				}
				return arr;
			},
			getScollHeightFun() {
				let that = this;
				let windowHeight = 0;

				let sysinfo = uni.getSystemInfoSync();
				// 总盒子高度
				windowHeight = sysinfo.windowHeight;

				const openPage = () => {
					that.tabberPageLoadFlag = that.tabbarList.map((item, tabbar_index) => {
						return {
							id: item.id,
							type: 0 == item.id
						}
					})
				};

				// 当开启底栏是打开
				// 底部栏高度
				if (that.tabbarList.length > 1) {

					uni.createSelectorQuery().select('.tabbar').boundingClientRect(data => {
						let tabbarHeight = data.height + sysinfo.safeAreaInsets.bottom;
						let scrollHeight = windowHeight - data.height;
						// let scrollHeight = windowHeight - data.height - sysinfo.safeAreaInsets.bottom;

						that.$set(that.scrollConfig, 'tabbarHeight', tabbarHeight);
						that.$set(that.scrollConfig, 'scrollHeight', scrollHeight);
						that.scrollHeight = scrollHeight;

						openPage();
					}).exec();

				} else {
					that.$set(that.scrollConfig, 'tabbarHeight', 0);
					that.$set(that.scrollConfig, 'scrollHeight', windowHeight);
					that.scrollHeight = windowHeight;
					openPage();

				};
			},
			tabberPageLoadFlagShow(id) {
				let findData = this.tabberPageLoadFlag.find(item => item.id == id);
				return findData ? findData['type'] : false;
			},
		}
	}
</script>

<style lang="scss">
	.index {
		overflow: hidden;
		height: 100vh;
	}
</style>